<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item :label="`${$t('common.choose_merchant')}:`">
					<merchant-select
						v-model="queryData.merchantId"
						v-symbols
						clearable
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.label_name_to_configure')}:`"
				>
					<el-input
						v-model="queryData.labelName"
						v-symbols
						clearable
						size="medium"
						style="width: 180px"
						maxlength="20"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item :label="`${$t('common.createBy')}:`">
					<el-input
						v-model="queryData.createdBy"
						v-symbols
						clearable
						size="medium"
						maxlength="10"
						style="width: 180px; margin-right: 20px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('101041')"
						type="warning"
						icon="el-icon-folder"
						:disabled="loading"
						size="medium"
						@click="addLabel"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				highlight-current-row
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="labelName"
					align="center"
					:label="$t('member.label_name_to_configure')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.labelName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="labelDesc"
					align="center"
					:label="$t('member.label_desc')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.labelDesc || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="labelUsedNum"
					align="center"
					:label="$t('member.label_used_num')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<div
							v-if="
								!!scope.row.labelUsedNum ||
									scope.row.labelUsedNum + '' === '0'
							"
							class="blueColor decoration"
							@click="lookGame(scope.row)"
						>
							{{ scope.row.labelUsedNum }}
						</div>
						<span v-else>-</span>
					</template>
				</el-table-column>

				<el-table-column
					prop="createdBy"
					align="center"
					:label="$t('common.createBy')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('common.createAt')"
					width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedBy"
					align="center"
					:label="$t('common.last_updateBy')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					:label="$t('common.last_updateAt')"
					width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="operating"
					align="center"
					fixed="right"
					:label="$t('common.actions')"
					width="210"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('101042')"
							type="primary"
							icon="el-icon-edit"
							size="medium"
							@click="edit(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>

						<el-button
							v-if="hasPermission('101043')"
							type="warning"
							icon="el-icon-delete"
							size="medium"
							:disabled="scope.row.labelUsedNum > 0"
							@click="deleteLabel(scope.row)"
						>
							{{ $t('common.delete') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="`${$t('member.add_edit')}`"
			:visible.sync="dialogFormVisible"
			:destroy-on-close="true"
			width="580px"
			center
			class="rempadding"
			@close="clear"
		>
			<el-divider></el-divider>
			<el-form
				ref="formSub"
				:model="dialogForm"
				:rules="rules"
				label-width="100px"
			>
				<el-form-item
					:label="`${$t('member.merchant_id')}:`"
					prop="merchantId"
				>
					<merchant-select
						v-model="dialogForm.merchantId"
						v-symbols
						:placeholder="$t('common.please_choose')"
						:disabled="
							title === $t('common.edit') ||
								dialogMerchantDisabled
						"
						style="width: 350px"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.label_name_to_configure')}:`"
					prop="labelName"
					:rules="[
						{
							required: true,
							message: $t('member.enter_2-20'),
							trigger: 'blur'
						},
						{
							min: 2,
							max: 20,
							message: $t('member.length_2-20'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="dialogForm.labelName"
						v-symbols
						:placeholder="`${$t('member.enter_2-20')}`"
						maxlength="20"
						show-word-limit
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.label_desc')}:`"
					prop="labelDesc"
					:rules="[
						{
							required: true,
							message: $t('member.label_desc_content'),
							trigger: 'blur'
						},
						{
							min: 2,
							max: 500,
							message: $t('member.length_2-500'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model.trim="dialogForm.labelDesc"
						:placeholder="`${$t('member.enter_2')}`"
						maxlength="500"
						type="textarea"
						show-word-limit
						clearable
						@input="handleInput"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					type="primary"
					:loading="subAddOrEditLoading"
					@click="subAddOrEdit"
				>
					{{ $t('common.save') }}
				</el-button>
			</div>
		</el-dialog>
		<el-dialog
			:title="`${$t('member.number_of_people_adding_tags')}`"
			:visible.sync="dialogGameVisible"
			:destroy-on-close="true"
			class="rempadding"
		>
			<el-divider></el-divider>
			<div class="contentBox disableColor">
				{{ $t('member.label_name_to_configure') }}： {{ labelName }}
			</div>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table dialog-layer-table"
				:data="gameList"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				highlight-current-row
			>
				<el-table-column
					prop="userName"
					align="center"
					:label="$t('common.member_number')"
				>
					<template slot-scope="scope">
						{{ scope.row.userName }}
					</template>
				</el-table-column>
				<el-table-column
					prop="accountType"
					align="center"
					:label="$t('common.number_type')"
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.accountType, 'accountType') }}
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantName"
					align="center"
					:label="$t('common.belong_merchant')"
				>
					{{ merchantName }}
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!summary"
				:current-page.sync="page"
				background
				class="fenye"
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="size"
				:page-sizes="pageSizes"
				:total="summary"
				:pager-count="9"
				@current-change="handleCurrentChangeDialog"
				@size-change="handleSizeChangeDialog"
			></el-pagination>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { NO_SPECIAL_CHAR } from '@/utils/pattern'
import MainContent from '@/components/MainContent/index.vue'
export default {
	name: routerNames.memberLabelConfig,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				labelName: undefined,
				merchantId: undefined,
				createdBy: undefined
			},
			tableData: [],
			dialogFormVisible: false,
			dialogForm: {
				labelName: undefined,
				merchantId: undefined,
				labelDesc: undefined
			},
			gameList: [],
			dialogGameVisible: false,
			title: '',
			labelName: '',
			merchantName: '',
			id: '',
			page: 1,
			size: 100,
			summary: 0,
			subAddOrEditDisabled: false,
			subAddOrEditLoading: false
		}
	},
	computed: {
		dialogMerchantDisabled() {
			//  当商户没有下级商户时，默认选择当前商户，选项禁用
			return !this.$store.getters.isZk
				? this.merchantList.length <= 1
				: false
		},
		merchantList() {
			return this.$store.getters.merchantList || []
		},
		rules() {
			const merchantId = [
				{
					required: true,
					message: this.$t('member.please_select_a_merchant'),
					trigger: 'change'
				}
			]
			return {
				merchantId
			}
		}
	},
	created() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
	},
	methods: {
		handleInput(val) {
			this.dialogForm.labelDesc = val.replace(NO_SPECIAL_CHAR, '')
		},
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		loadData() {
			this.loading = true
			const params = {
				labelType: 0,
				...this.queryData,
				...this.getParams(params)
			}
			this.$api
				.getMemberPageLabel(params)
				.then((res) => {
					this.loading = false
					const { code, msg } = res
					if (res && code === 200) {
						this.tableData = (res.data && res.data.record) || []
						this.total = (res.data && res.data.totalRecord) || 0
					} else {
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 弹框标签添加人数
		getMemberMemberInfoByLabelId(val) {
			const params = {}
			params.id = val
			params.pageNum = this.page
			params.pageSize = this.size
			this.$api.getMemberMemberInfoByLabelId(params).then((res) => {
				if (res.code === 200) {
					this.gameList = res.data.record || []
					this.summary = res.data.totalRecord || 0
					this.dialogGameVisible = true
				}
			})
		},
		lookGame(val) {
			this.dialogGameVisible = true
			this.labelName = val.labelName
			this.merchantName = val.merchantName

			this.id = val.id
			this.page = 1
			this.size = 100
			this.getMemberMemberInfoByLabelId(val.id)
		},
		reset() {
			this.queryData.labelName = undefined
			this.queryData.createdBy = undefined

			if (!this.$store.getters.isZk) {
				this.queryData.merchantId = this.$store.getters.merchantInfo.id
			} else {
				this.queryData.merchantId = undefined
			}
			this.loadData()
			this.pageNum = 1
			this.tableData = []
		},
		addLabel() {
			this.title = this.$t('common.add')
			this.dialogForm.labelName = undefined
			this.dialogForm.labelDesc = undefined

			if (!this.$store.getters.isZk) {
				this.dialogForm.merchantId = this.$store.getters.merchantInfo.id
			} else {
				this.dialogForm.merchantId = undefined
			}
			this.dialogFormVisible = true
		},
		edit(val) {
			this.title = this.$t('common.edit')
			this.dialogForm = { ...val }
			this.dialogFormVisible = true
		},
		deleteLabel(val) {
			const { id } = val
			this.$confirm(
				`<strong>${this.$t('member.delete_tips')}?</strong>
        </br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
			'member.warning_tips'
		)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.$api.setMemberDeleteLabel({ id }).then((res) => {
						const { code } = res
						if (res && code === 200) {
							this.$message.success(
								this.$t('common.delete_success')
							)
							this.loadData()
						}
					})
				})
				.catch(() => {})
		},
		subAddOrEdit() {
			const data = {}
			data.labelDesc = this.dialogForm.labelDesc
			data.merchantId = this.dialogForm.merchantId
			data.labelName = this.dialogForm.labelName
			data.labelType = 0
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					this.subAddOrEditDisabled = true
					this.subAddOrEditLoading = true
					if (this.title === this.$t('common.add')) {
						this.$api
							.setMemberAddOrEditMemberLabel(data)
							.then((res) => {
								const { code } = res
								if (res && code === 200) {
									this.$message.success(
										this.$t('common.add_success')
									)
									this.pageNum = 1
									this.loadData()
								}
								this.dialogFormVisible = false
								this.disabledDelay(
									'subAddOrEditDisabled',
									false,
									1000
								)
								this.subAddOrEditLoading = false
							})
							.catch(() => {
								this.subAddOrEditLoading = false
							})
					} else {
						data.id = this.dialogForm.id
						this.$api
							.setMemberAddOrEditMemberLabel(data)
							.then((res) => {
								const { code } = res
								if (res && code === 200) {
									this.$message.success(
										this.$t('common.modify_success')
									)
									this.loadData()
								}
								this.dialogFormVisible = false
								this.disabledDelay(
									'subAddOrEditDisabled',
									false,
									1000
								)
								this.subAddOrEditLoading = false
							})
							.catch(() => {
								this.subAddOrEditLoading = false
							})
					}
				}
			})
		},
		clear() {
			this.$refs.formSub.resetFields()
		},
		handleCurrentChangeDialog(val) {
			this.page = val
			this.getMemberMemberInfoByLabelId(this.id)
		},
		handleSizeChangeDialog(val) {
			this.page = 1
			this.size = val
			this.getMemberMemberInfoByLabelId(this.id)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;

	.contentBox,
	form {
		padding: 0 20px;
	}
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}
::v-deep .el-input-number--medium .el-input__inner {
	padding: 0 15px;
	text-align: left;
}

.decoration {
	text-decoration: underline;
	cursor: pointer;
}
.fenye {
	text-align: center;
}
::v-deep .dialog-layer-table .el-table__body-wrapper {
	overflow-y: auto;
	max-height: 45vh;
}
</style>
